<template>
  <div>
    <el-select v-model="countryValue" filterable placeholder="请选择国家">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>

<script>
import countries from './countryList.js'; // 确保路径正确

export default {
  name: 'CountrySelect',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    name: String,
    default: ''
  },
  data() {
    return {
      countryValue: '',
      options: countries.map(country => ({
        value: String(country.value),
        label: country.label
      }))
    };
  },
  watch: {
    modelValue(newVal) {
      this.countryValue = newVal;
    },
    countryValue(newVal) {
      this.updateModel(newVal);
    }
  },
  methods: {
    updateModel(value) {
      this.$emit('input', value);
    },
     // 在 CountrySelect 组件的 methods 中添加
     reset() {
      this.countryValue = '';
      this.$emit('input', ''); // 确保也触发 input 事件来更新外部的 v-model 绑定值
    },
  },
  mounted() {
    this.countryValue = this.modelValue;
  }
};
</script>